<template>
	<uni-popup ref="popupRef" type="center">
		<view class="main">
			<image :src="path" mode="widthFix" style="width: 600rpx;"></image>
			<l-painter ref="painterRef" isCanvasToTempFilePath @success="path = $event" hidden css="width:600rpx;">
				<l-painter-view
					css="width:600rpx;height:920rpx;text-align:center;background-image:url('@/static/shareBg.png')">
					<l-painter-view css="margin-top:40rpx;">
						<l-painter-text text="税票匹配方案" css="color: #FFFFFF;font-size: 40rpx;line-height: 48rpx;" />
					</l-painter-view>
					<l-painter-view css="">
						<l-painter-text :text="`生成时间:${info.pipei_time}`"
							css="color: #FFFFFF;font-size: 24rpx;line-height: 48rpx;" />
					</l-painter-view>
					<l-painter-view css="margin-top:60rpx;">
						<l-painter-text :text="info.business_name"
							css="font-weight: 400;font-size: 34rpx;color: #000000;line-height: 48rpx;" />
					</l-painter-view>
					<l-painter-view css="display:flex;align-items: center;justify-content: center;margin-bottom:32rpx;">
						<l-painter-image src="@/static/icon8.png" css="width: 22rpx; height: 22rpx;" />
						<l-painter-text :text="`该企业准入产品: ${info.count}款`"
							css="font-weight: 400;font-size: 24rpx;color: #34C759;line-height: 40rpx;" />
					</l-painter-view>
					<l-painter-view css="border: 2rpx solid rgba(26,100,255,0.5);width:408rpx;margin:auto">
					</l-painter-view>
					<l-painter-view css="border: 2rpx solid #1A64FF;width:408rpx;margin:auto;margin-top:10rpx;">
					</l-painter-view>
					<l-painter-qrcode :text="info.report_url" css="width: 208rpx; height: 208rpx;margin-top:40rpx;" />
					<l-painter-view css="margin-top:28px;">
						<l-painter-text text="扫码查看融资方案"
							css="font-weight: 400;font-size: 32rpx;color: #000000;line-height: 48rpx;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter>
			<view class="btn" @click="handleSave">
				长按图片保存分享
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const path = ref('')
	const popupRef = ref(null)

	const close = () => {
		popupRef.value.close()
	}
	let info = ref({})
	const open = (item) => {
		info.value = item
		popupRef.value.open()
	}
	const painterRef = ref(null)
	const handleSave = () => {
		popupRef.value.close()
		painterRef.value.canvasToTempFilePathSync({
			fileType: "png",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			quality: 1,
			success: (res) => {
				console.log(res.tempFilePath);
				// 非H5 保存到相册
				// H5 提示用户长按图另存
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function() {
						console.log('save success');
					}
				});

			},
		});
	}
	defineExpose({
		close,
		open
	})
</script>

<style lang="scss" scoped>
	.main {
		width: 600rpx;
		height: 920rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
	}

	.btn {
		line-height: 88rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -100rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>